<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-13 09:15:40
 * @LastEditTime: 2023-09-25 09:42:10
 * @LastEditors: 呆龙
-->
<template>
  <!-- vue3页面 -->
  <a-card title="撰写提案" style="height: 100%; overflow-y: auto">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 22 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="提案名称"
            name="overtureName"
            :rules="[{ required: true, message: '请填写提案名称!' }]"
          >
            <a-input
              v-model:value="formState.overtureName"
              placeholder="提案名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="所属教代会"
            name="forTeachers"
            :rules="[{ required: true, message: '请填写所属教代会!' }]"
          >
            <MySelect
              title="请选择所属教代会"
              style="width: 100%"
              :fieldNames="{ label: 'label', value: 'label' }"
              :selectData="forTeachersSelect"
              @change="changeSelect('forTeachers', $event)"
            ></MySelect>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="提案人"
            name="overturePeople"
            :rules="[{ required: true, message: '请填写提案人!' }]"
          >
            <a-input
              v-model:value="formState.overturePeople"
              placeholder="提案人"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="所在单位"
            name="units"
            :rules="[{ required: true, message: '请选择所在单位！' }]"
          >
            <a-input
              v-model:value="formState.units"
              placeholder="所在单位"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="所在代表团"
            name="delegacy"
            :rules="[{ required: true, message: '请选择所在代表团！' }]"
          >
            <MySelect
              title="请选择所在代表团"
              style="width: 100%"
              :fieldNames="{ label: 'label', value: 'label' }"
              :selectData="delegacySelect"
              @change="changeSelect('delegacy', $event)"
            ></MySelect>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="撰写时间"
            name="writeTime"
            :rules="[{ required: true, message: '请选择撰写时间！' }]"
          >
            <a-input
              disabled
              v-model:value="formState.writeTime"
              placeholder="撰写时间"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="提案方式"
            name="suggestMethod"
            :rules="[{ required: true, message: '请选择提出方式！' }]"
          >
            <a-radio-group
              v-model:value="formState.suggestMethod"
              button-style="solid"
            >
              <a-radio-button value="个人提案">个人提案</a-radio-button>
              <a-radio-button value="代表团提案">代表团提案</a-radio-button>
              <a-radio-button value="委员会提案">委员会提案</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="提案类型"
            name="overtureType"
            :rules="[{ required: true, message: '请选择提案类型！' }]"
          >
            <MySelect
              title="请选择提案类型"
              style="width: 100%"
              :fieldNames="{ label: 'label', value: 'label' }"
              :selectData="overtureTypeSelect"
              @change="changeSelect('overtureType', $event)"
            ></MySelect>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
            label="案由"
            name="cause"
            :rules="[{ required: true, message: '请填写案由！' }]"
          >
            <myEditor @write-over="writeOver" :height="320" :name="'cause'" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
            label="建议及措施"
            name="adviceAndMeasures"
            :rules="[{ required: true, message: '请填写建议及措施！' }]"
          >
            <myEditor
              :value="Text"
              @write-over="writeOver"
              :height="320"
              :name="'adviceAndMeasures'"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
            label="附件"
            name="file"
          >
            <a-button class="upLoad" type="dashed"
              >将文件拖到此处，或点击上传</a-button
            >
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="start" v-if="menuData?.sign">
        <a-col>
          <a-form-item
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
            label="签名"
            name="signature"
            :rules="[{ required: true, message: '签名！' }]"
          >
            <a-input v-model:value="formState.signature" />
          </a-form-item>
        </a-col>
      </a-row>
      <div class="submit">
        <a-button type="primary" html-type="submit">保存我的提案</a-button>
        <a-button type="primary">邀请附议人</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import moment from "moment";
import myEditor from "../common/wangEditor.vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
// import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import { getOvertrueConfig, addOverture } from "@/api/overtrue";
const menuData = ref<any>();
const route = useRoute();
const formState = reactive({
  // 提案名称
  overtureName: "",
  // 所属教代会
  forTeachers: null,
  // 提案人
  overturePeople: "",
  // 所在单位
  units: "",
  // 所在代表团
  delegacy: null,
  // 撰写时间
  writeTime: "",
  // 提出方式
  suggestMethod: "",
  // 提案类型
  overtureType: null,
  // 案由
  cause: "",
  // 建议及措施
  adviceAndMeasures: "",
  // 附件
  file: [] as string[],
  // 签名
  signature: null,
  // 当前提案的状态
  code: 100,
  codeName: "未提交",
  codeColor:''
}) as any;
const Text = ref("");
onMounted(() => {
  formState.writeTime = moment().format("YYYY-MM-DD");
  getOvertrueConfig(route.meta.menuId as string).then((res: any) => {
    menuData.value = res.data.data[0];
    console.log();
  });
});
const forTeachersSelect = [
  {
    value: "forTeachers0",
    label: "第二届第四次",
  },
  {
    value: "forTeachers1",
    label: "第二届第三次",
  },
  {
    value: "forTeachers2",
    label: "第二届第二次",
  },
  {
    value: "forTeachers3",
    label: "第二届第一次",
  },
];
const overtureTypeSelect = [
  {
    value: "overtureType0",
    label: "改革发展",
  },
  {
    value: "overtureType1",
    label: "人才培养",
  },
  {
    value: "overtureType2",
    label: "学科科技",
  },
  {
    value: "达瓦大",
    label: "管理服务",
  },
];
const delegacySelect = [
  {
    value: "delegacy0",
    label: "第一代表团",
  },
  {
    value: "delegacy1",
    label: "第二代表团",
  },
  {
    value: "delegacy2",
    label: "第三代表团",
  },
  {
    value: "delegacy3",
    label: "第四代表团",
  },
];

const onFinish = () => {
  formState.code = menuData.value.behindData[0].code;
  formState.codeName = menuData.value.behindData[0].title;
  formState.codeColor = menuData.value.behindData[0].color;
  console.log("Success:", formState);
  addOverture(formState).then((res: any) => {
    console.log(res);
  });
};

const writeOver = (key: string, data: string) => {
  console.log(key, data);
  if (!data) {
    return;
  }
  if (data.replace(/<[^>]*>/g, "").trim() !== "") {
    if (key === "cause") {
      formState["cause"] = data;
    } else {
      formState["adviceAndMeasures"] = data;
    }
  } else {
    if (key === "cause") {
      formState["cause"] = "";
    } else {
      formState["adviceAndMeasures"] = "";
    }
  }
};
/** 全部的select组件的change触发后的事件 */
const changeSelect = (key: keyof typeof formState, value: any) => {
  formState[key] = value;
};
</script>

<style scoped lang="less">
.upLoad {
  width: 100%;
  height: 70px;
}
:deep(.ant-input) {
  border-radius: 4px;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: center;
  button {
    margin: 0 20px;
  }
}
:deep(.ant-card) {
  height: 100%;
  overflow-y: scroll;
}
</style>
